<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>户籍管理系统</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- <script src="./"></script> -->
    <style>
        .container {
            margin: 1rem 1rem;

        }

        h2 {
            margin-left: 3rem;
        }

        h5 {
            margin-top: 1rem;
        }
    </style>
</head>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

<body>
    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
        <div class="container-fluid">
            <a class="navbar-brand">
                <h2>户籍管理系统</h2>
            </a>

            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search">
                <button class="btn btn-outline-primary" type="submit">搜索</button>
            </form>

        </div>
    </nav>

    <div class="row">
        <div class="col-2">

            <a href="./tian_jia.html">户籍信息添加</a>
            


               <!-- <div class="list-group" id="list-tab" role="tablist">

                <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list"
                    href="#" role="tab">系统用户管理</a>

                <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list"
                    href="./tian_jia.html" role="tab">户籍信息添加<div></div> </a>

                <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list"
                    href="#" role="tab">户籍信息管理<div></div> </a>

                <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list"
                    href="#" role="tab">个人户籍查看</a>

                <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list"
                    href="#" role="tab"">户籍系统管理</a>
            </div> -->
            
          
        </div>

        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

        <div class=" col-9">
                    <div class="tab-content" id="nav-tabContent">

                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

                        <div class="tab-pane fade" id="list-profile" role="tabpanel">
                            <!-- <h5>户籍信息管理</h5> -->
                            <h6>搜索:</h6>

                            <div class="col-6">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" placeholder="请输入查询信息">
                                    <button class="btn btn-outline-secondary" type="button"
                                        id="button-addon2">查询</button>
                                </div>

                            </div>

                            <table
                                class="table table-bordered border-primary table-info table-striped caption-top col-10">
                                <caption>信息列表:</caption>
                                <thead>
                                    <tr>
                                        <th scope="co1">序号</th>
                                        <th scope="col">姓名</th>
                                        <th scope="col">性别</th>
                                        <th scope="col">民族</th>
                                        <th scope="col">身份证号</th>
                                        <th scope="col">学号</th>
                                        <th scope="col">手机号</th>
                                        <th scope="col">QQ号</th>
                                        <th scope="col">学院</th>
                                        <th scope="col">班级</th>
                                        <th scope="col">家庭住址</th>
                                        <th scope="col">操作</th>
                                        <th><button>返回</button></th>

                                    </tr>
                                </thead>

                                <tbody class="datalist">

                                
                                </tbody>
                            </table>
                        </div>


                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

                        <div class="tab-pane fade" id="list-messages" role="tabpanel">...
                        </div>

                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

                        <div class="tab-pane fade" id="list-settings" role="tabpanel">...
                        </div>
                    </div>
            </div>
        </div>
    </div>




    <script>
        const datalist=document.querySelector('.datalist')
        const xhr2 = new XMLHttpRequest()

        xhr2.onload = function () {
            const data = JSON.parse(xhr2.responseText);

            console.log('data=', data);

            // / Home_address: ""
            // / QQ_number: ""
            // / Student_number: "gfhtghg"
            // / cell_phone_number: ""
            // / class1: ""
            // / college: ""
            // / gender: "男"
            // / id: 21
            // / id_number: ""
            // / name: "2222
            // / nation: ""

            const lis = data.map(item=>{
                // item:每一条数据
                return `
                <tr>
                    <th scope="row">${data[item]}</th>
                    <td>${item.name}</td>
                    <td>${item.gender}</td>
                    <td>${item.nation}</td>
                    <td>${item.id_number}</td>
                    <td>${item.Student_number}</td>
                    <td>${item.cell_phone_number}</td>
                    <td>${item.QQ_number}</td>
                    <td>${item.college}</td>
                    <td>${item.class1}</td>
                    <td>${item.Home_address}</td>
                    <td><button>修改</button><button>删除</button></td>
                    <td><button>返回</button></td>
                </tr>
                
               `

            }).join('')

            datalist.innerHTML = lis



        }

        xhr2.open('get', 'http://localhost:2021/api/guan_li/guan',
            true);

        xhr2.send()
    </script>

</body>

</html>